<template>
	<div class="page">
		<div class="header">
			<div class="header-con">
				<div class="header-title">Login</div>
				<div class="header-back">
					<router-link to="/register">
						<span class="back">
							<i class="iconfont">&#xe604;</i> sign up
						</span>
					</router-link>
				</div>

			</div>
		</div>
		<div class="select-body">
			<div class="userForm">
				<div class="item">
					<label for="username">username</label><input id="username" type="text" placeholder="您的用户名" v-model="username">
				</div>
				<div class="item">
					<label for="password">password</label><input id="password" type="password" placeholder="您的密码" v-model="password">
				</div>
				<div class="item">
					<button class="submit-btn active" @click="submit_data">sign in</button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Axios from "Axios";
import { mapMutations } from 'vuex';
import {
	UPDATE_SESSIONSTORAGE
} from './../store/mutation-types';

export default {
	name: 'Login',
	data() {
		return {
			username: '',
			password: '',
		}
	},
	methods: {
		...mapMutations([
			UPDATE_SESSIONSTORAGE,
		]),
		submit_data() {
			let username = this.username;
			let password = this.password;
			Axios({
				url: '/apis/login',
				methods: 'post',
				params: {
					username,
					password
				}
			}).then((response) => {
				let { code, data, msg } = response.data;
				if (code == 0) {
					let { id: userId, username: userName, token } = data;

					this.UPDATE_SESSIONSTORAGE({
						storageItems: [
							{ key: 'userId', name: userId },
							{ key: 'userName', name: userName },
							{ key: 'token', name: token }
						]
					})
					this.$router.push('home')
				}

			})
		}
	}
}
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .header,
  .footer {
    width: inherit;
    height: 40px;
    border: 1px solid #48525a;
    border-left: none;
    border-right: none;
    color: azure;
  }
  /*页头部样式*/
  .header-con {
    width: 100%;
    height: inherit;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    .header-back {
      width: auto;
      height: inherit;
      padding: 0 5px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .back {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 2px 5px;
      border-radius: 2px;
      background: #545159;
      cursor: pointer;
      color: #fbfbfb;
      > i {
        color: #29f5a6;
      }
    }
    .header-title {
      height: inherit;
      flex: 1;
      display: flex;
      padding: 0 5px;
      justify-content: flex-start;
      align-items: center;
    }
  }
  .select-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .userForm {
    .item {
      padding: 5px;
      border-radius: 3px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      transition: all 0.2s;
      &:hover {
        background: #2b2a2e;
      }
      > label {
        display: inline-block;
        color: #bbbbbb;
        width: 80px;
        height: 30px;
        line-height: 30px;
      }
      > input {
        flex: 1;
        height: 30px;
        width: 150px;
        border: 1px solid #48525a;
        border-radius: 3px;
        text-indent: 0.5rem;
        color: #bbbbbb;
        appearance: none;
        outline: none;
        background: none;
      }
    }
    .submit-btn {
      width: 100%;
      height: 32px;
      border-radius: 3px;
      border: 1px solid #48525a;
      background: transparent;
      color: #bbbbbb;
      outline: none;
      transition: all 0.2s;
    }
    .active {
      background: #1ed689;
      color: #fefefe;
      &:hover {
        background: #1cc67f;
      }
    }
  }
}
</style>
